<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./less/example.css">
    <style>
        /* 假如我根据的设计稿是1920*1080大小的，将宽度划分10等份，那么html的font-size=1920/10=192px，
        在开发的过程中就以192px为基准，为了适应其他的屏幕大小，需要在媒体查询中为每个屏幕大小设置其html 的font-size大小，
        为（屏幕宽度/10px） */

        /* 如果屏幕大小为500*360，那么1rem=500/10=50px */
        @media screen and (min-width:500px) {
            html {
                font-size: 50px;
            }
        }

        /* 如果屏幕大小为640*360，那么1rem=640/10=64px */
        @media screen and (min-width:640px) {
            html {
                font-size: 64px;
            }
        }

        /* 如果屏幕大小为740*360，那么1rem=740/10=74px */
        @media screen and (min-width:740px) {
            html {
                font-size: 74px;
            }
        }

        /* 如果屏幕大小为915*412，那么1rem=915/10=91.5px */
        @media screen and (min-width:915px) {
            html {
                font-size: 91.5px;
            }
        }

        /* 如果屏幕大小为1024*768，那么1rem=1024/10=102.4px */
        @media screen and (min-width:1024px) {
            html {
                font-size: 102.4px;
            }
        }

        /* 如果屏幕大小为1300*500的，划分10等份，那么1rem=1300/10=130px */
        @media screen and (min-width: 1300px) {
            html {
                font-size: 130px;
            }
        }

        /* 如果屏幕大小是1400*1080的，划分10等份，那么1rem=1400/10=140px */
        @media screen and (min-width: 1400px) {
            html {
                font-size: 140px;
            }
        }

        /* 如果屏幕大小是1500*1080的，划分10等份，那么1rem=1500/10=150px */
        @media screen and (min-width: 1500px) {
            html {
                font-size: 150px;
            }
        }

        /* 如果屏幕大小是1920*1080的，划分10等份，那么1rem=1920/10=192px */
        @media screen and (min-width: 1920px) {
            html {
                font-size: 192px;
            }
        }
    </style>
</head>

<body>
    <div class="header">
        <span>头部</span>
        <span>头部</span>
        <span>头部</span>
        <span>头部</span>
    </div>

    <div class="content">
        内容
    </div>


</body>

</html>